<template>
  <div class="">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div
        style="
          text-align: center;
          background-color: #f1f1f3;
          height: 100%;
          padding: 20px;
          margin: 0px;
        "
      >
        <h1 style="font-size: 50px; margin: 0px; padding: 20px">
          {{ '欢迎你！' + this.user.name }}
        </h1>
        <el-descriptions title="个人中心" :column="2" size="40" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              账号
            </template>
            {{ this.user.no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              电话
            </template>
            {{ this.user.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-xingbie"></i>
              性别
            </template>
            <el-tag
              :type="this.user.sex === '男' ? '' : 'danger'"
              disable-transitions
              ><i
                :class="
                  this.user.sex === '男' ? 'el-icon-male' : 'el-icon-female'
                "
              ></i
              >{{ this.user.sex === '男' ? '男' : '女' }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-role"></i>
              角色
            </template>
            <el-tag
              :type="this.user.roleId == 0 ? 'danger' : 'success'"
              disable-transitions
              >{{ this.user.roleId == 0 ? '管理员' : '用户' }}</el-tag
            >
          </el-descriptions-item>
        </el-descriptions>

        <DateUtils></DateUtils>
      </div>

      <el-divider></el-divider>

      <div>
        <Charts></Charts>
      </div>
    </el-card>
  </div>
</template>

<script>
import DateUtils from '@/components/DateUtils.vue'
import Charts from '@/components/Charts.vue'

export default {
  name: 'Home',
  components: {
    DateUtils,
    Charts
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {}
    }
  },
  methods: {}
}
</script>

<style scoped></style>
